import React, {JSX, useState} from 'react';
import {View, FlatList, StyleSheet} from 'react-native';
import Header from './header';
import HistoryItem from './item';
import {ScreenHeight, ScreenWidth} from '../../config/devices';
import { normalize } from '../../utils/adapter';

type Props = {};

export type WithdeawalHistoryItem = {
  label: string;
  date: string;
  amount: number;
  id: string;
};

export default function ({}: Props): JSX.Element {
  const [amount] = useState<number>(6238);
  const [list] = useState<Array<WithdeawalHistoryItem>>([
    {
      label: '金币兑换现金',
      date: '2025-01-17 09:49:55',
      amount: 0.1,
      id: '231s5afd2',
    },
    {
      label: '红包兑换现金',
      date: '2025-01-17 09:49:55',
      amount: 0.1,
      id: '231s5afd3',
    },
    {
      label: '金币兑换现金',
      date: '2025-01-17 09:49:55',
      amount: 0.1,
      id: '231s5afd4',
    },
    {
      label: '红包兑换现金',
      date: '2025-01-17 09:49:55',
      amount: 0.1,
      id: '231s5afd5',
    },
    {
      label: '红包兑换现金',
      date: '2025-01-17 09:49:55',
      amount: 0.1,
      id: '231s5afd6',
    },
    {
      label: '金币兑换现金',
      date: '2025-01-17 09:49:55',
      amount: 0.1,
      id: '231s5afd7',
    },
    {
      label: '红包兑换现金',
      date: '2025-01-17 09:49:55',
      amount: 0.1,
      id: '231s5afd8',
    },
    {
      label: '金币兑换现金',
      date: '2025-01-17 09:49:55',
      amount: 0.1,
      id: '231s5afd9',
    },
    {
      label: '红包兑换现金',
      date: '2025-01-17 09:49:55',
      amount: 0.1,
      id: '231s5afd10',
    },
    {
      label: '红包兑换现金',
      date: '2025-01-17 09:49:55',
      amount: 0.1,
      id: '231s5afd11',
    },
  ]);

  return (
    <View style={styles.history_container}>
      <Header value={amount} />
      <View style={styles.list_view}>
        <FlatList
          data={list}
          keyExtractor={item => item.id}
          renderItem={({item}) => {
            return <HistoryItem {...item} />;
          }}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  history_container: {
    flex: 1,
  },
  list_view: {
    flex: 1,
    backgroundColor: '#fff',
    position: 'absolute',
    height:normalize(ScreenHeight - 240),
    width: ScreenWidth,
    top: normalize(240),
    borderTopLeftRadius: normalize(14),
    borderTopRightRadius: normalize(16),
    paddingHorizontal: normalize(20),
    paddingBottom:normalize(20),
  },
});
